<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>了解更多</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/brandStory.css">
    <link rel="stylesheet" href="./css/brandStoryAddComment.css">
    <script src="./js/bootstrap.bundle.min.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <!-- 封装一个头部 -->
    <div class="container-fluid navImg">
        <!-- 头部栅格系统 -->
        <div class="row">
            <div class="col-3 bg-transparent pt-4 h4 pb-4 bg-primary text-center text-white">登录</div>
            <div class="col-6 bg-transparent h4 pt-4 pb-4 bg-dark text-center text-white">新时尚购物网</div>
            <div class="col-3 bg-transparent bg-primary text-white shopping">
                <div class="row" onclick="location.href = './ShoppingCart.html'">
                    <div class="col-8 pb-lg-4 pt-lg-4 text-center bg-dark" style="font-size: 10px;">购物车:(0 items)
                        <svg style="color: #ff698d;" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16">
                            <path
                                d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z" />
                        </svg>
                    </div>
                    <div class="col-4 bg-transparent"></div>
                </div>
            </div>
        </div>




        <!-- ========导航栏===================== -->
        <div class="row mt-2">
            <div class="col-2"></div>
            <div class="col-8 smallScreen">
                <nav class="navBackground navbar navbar-expand-md bg-dark navbar-dark" style="padding: 0;">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                        <ul class="navbar-nav justify-content-center" style="width: 100%;">
                            <li class="nav-item" onclick="location.href = './index.html'">
                                <a class="nav-link" href="./index.html">首页</a>
                            </li>
                            <li class="nav-item" onclick="location.href = './womenClother.html'">
                                <a class="nav-link" href="./womenClother.html">女装/家具</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">男装/户外</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">童装/玩具</a>
                            </li>
                            <li class="nav-item" onclick="location.href = './about.html'">
                                <a class="nav-link" href="./about.html">关于我们</a>
                            </li>
                            <li class="nav-item" onclick="location.href = './brandStory.html'">
                                <a class="nav-link" href="./brandStory.html">品牌故事</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div class="col-2"></div>
        </div>


        <!-- largeScreen -->
        <div class="row">
            <div class="col-2"></div>
            <div class="col-8">
                <div class="row largeScreen">
                    <div class="col-2 text-center navBackgroundFirst" onclick="location.href = './index.html'"><a href="./index.html">首页</a></div>
                    <div class="col-2 text-center showId showId1" onclick="location.href = './womenClother.html'"><a href="./womenClother.html">女装/家具</a></div>
                    <div class="col-2 text-center showId showId2">男装/户外</div>
                    <div class="col-2 text-center showId showId3">童装/玩具</div>
                    <div class="col-2 text-center showId showId4" onclick="location.href = './about.html'"><a href="./about.html">关于我们</a></div>
                    <div class="col-2 text-center showId showId5" onclick="location.href = './brandStory.html'">品牌故事
                    </div>
                </div>
            </div>
            <div class="col-2"></div>
        </div>


        <!-- open -->
        <div class="row">
            <div class="col-2"></div>
            <div class="col-8 navOpen">
                <div class="sameNavOpen openNav1">
                    <div class="row">
                        <div class="col-2">
                            <p class="headItem">上装</p>
                            <p>卫衣</p>
                            <p>衬衫</p>
                            <p>T衬</p>
                            <p>毛衣</p>
                            <p>马甲</p>
                            <p>背带</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">外套</p>
                            <p>短外裙</p>
                            <p>女式风衣</p>
                            <p>毛呢大衣</p>
                            <p>女式西装</p>
                            <p>羽绒服</p>
                            <p>皮草</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">女裤</p>
                            <p>休闲裤</p>
                            <p>牛仔裤</p>
                            <p>打底裤</p>
                            <p>羽绒裤</p>
                            <p>七分裤</p>
                            <p>九分裤</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">裙装</p>
                            <p>连衣裙</p>
                            <p>半身裙</p>
                            <p>旗袍</p>
                            <p>无袖裙</p>
                            <p>长袖裙</p>
                            <p>职业裙</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">女装</p>
                            <p>卫衣</p>
                            <p>衬衫</p>
                            <p>T衫</p>
                            <p>毛衣</p>
                            <p>马甲</p>
                            <p>背带</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">家具</p>
                            <p>保暖内衣</p>
                            <p>睡袍</p>
                            <p>家具服</p>
                            <p>袜子</p>
                            <p>手套</p>
                            <p>围巾</p>
                        </div>
                    </div>
                </div>
                <div class="sameNavOpen openNav2">
                    <div class="row">
                        <div class="col-2">
                            <p class="headItem">上装</p>
                            <p>短外套</p>
                            <p>卫衣</p>
                            <p>衬衫</p>
                            <p>风衣</p>
                            <p>夹克</p>
                            <p>毛衣</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">裤子</p>
                            <p>休闲长裤</p>
                            <p>工装裤</p>
                            <p>休闲短裤</p>
                            <p>牛仔短裤</p>
                            <p>防水短裤</p>
                            <p>特色短裤</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">特色套装</p>
                            <p>运动套装</p>
                            <p>时尚套装</p>
                            <p>工装制服</p>
                            <p>民风汉服</p>
                            <p>老年套装</p>
                            <p>大码套装</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">运动穿搭</p>
                            <p>休闲鞋</p>
                            <p>跑步鞋</p>
                            <p>篮球鞋</p>
                            <p>运动夹克</p>
                            <p>运动长裤</p>
                            <p>运动卫衣</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">男装</p>
                            <p>卫衣</p>
                            <p>衬衫</p>
                            <p>T衫</p>
                            <p>毛衣</p>
                            <p>马甲</p>
                            <p>背带</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">正装套装</p>
                            <p>西服</p>
                            <p>西裤</p>
                            <p>西服套装</p>
                            <p>商务套装</p>
                            <p>休闲套装</p>
                            <p>新浪套装</p>
                        </div>
                    </div>
                </div>
                <div class="sameNavOpen openNav3">
                    <div class="row">
                        <div class="col-2">
                            <p class="headItem">童装</p>
                            <p>套装</p>
                            <p>外套</p>
                            <p>裤子</p>
                            <p>家居服</p>
                            <p>羽绒服</p>
                            <p>防晒衣</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">玩具</p>
                            <p>益智玩具</p>
                            <p>拼装积木</p>
                            <p>毛绒抱枕</p>
                            <p>遥控玩具</p>
                            <p>户外玩具</p>
                            <p>乐器玩具</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">童鞋</p>
                            <p>运动鞋</p>
                            <p>学步鞋</p>
                            <p>儿童鞭子</p>
                            <p>儿童皮鞋</p>
                            <p>儿童凉鞋</p>
                            <p>儿童舞蹈鞋</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">潮玩动漫</p>
                            <p>模型</p>
                            <p>手办</p>
                            <p>盲盒</p>
                            <p>桌游</p>
                            <p>卡游</p>
                            <p>动漫周边</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">童装</p>
                            <p>卫衣</p>
                            <p>衬衫</p>
                            <p>T衫</p>
                            <p>毛衣</p>
                            <p>马甲</p>
                            <p>背带</p>
                        </div>
                        <div class="col-2">
                            <p class="headItem">婴儿装</p>
                            <p>哈衣</p>
                            <p>爬服</p>
                            <p>罩衣</p>
                            <p>肚兜</p>
                            <p>户脐带</p>
                            <p>睡袋</p>
                        </div>
                    </div>
                </div>
                <div class="sameNavOpen openNav4">
                </div>
                <div class="sameNavOpen openNav5">
                </div>
            </div>
            <div class="col-2"></div>
        </div>
    </div>



    <!-- 品牌动态 -->
    <div class="container">
        <!-- 面包屑导航栏---首页/商品详情 -->
        <nav aria-label="breadcrumb mt-5">
            <ol class="breadcrumb breadcrumbNav mt-5">
                <!-- <li class="breadcrumb-item"><a href="#" class="text-dark">首页</a></li> -->
                <li class="breadcrumb-item active" aria-current="page" onclick="location.href = './index.html'" style="cursor: pointer;">首页</li>
                <li class="breadcrumb-item active" aria-current="page" style="color: black; font-weight: 600;">
                    品牌动态(了解更多)</li>
            </ol>
        </nav>



        <!-- 栅格系统--左右布局 -->
        <div class="row justify-content-between">
            <!-- 左侧 -->
            <div class="col-lg-8 col-md-8 mt-3">
                <div class="row">
                    <!-- 1 -->
                    <div class="col-12">
                        <p class="fs-5"><strong>越清新越漂亮:&nbsp;&nbsp;素颜女神神藏起4A腰拍美装照</strong></p>
                        <p style="font-size: 10px; color:#989997">
                            作者&nbsp;:陈福荣&nbsp;发布时间&nbsp;:&nbsp;&nbsp;<span class="text-warning"><strong>2022-9-24</strong></span>&nbsp;&nbsp;评论:(10)</p>
                        <img style="width: 100%;" class="img-fluid" src="./images/aboutMore.bmp" alt="">
                        <p style="font-size: 14px;color:#989997" class="mt-3">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3月不减肥，整年徒伤牌悲....天还没到，身材标准就从反手摸肚脐、锁骨放硬币，变成A4腰了，其大概就是说，腰杆如一张A4纸般大.让着装的你与阳光嬉戏与花朵亲吻，为你扫去心灵的雾霾，释放内心的小女孩，放松心情回归本真，遇见最美的自己.
                        </p>
                        <button type="button" style="background-color: #ff698d;color: white; padding: 8px 30px;" class="btn">了解更多</button>
                    </div>
                    <!-- 评论列表 -->
                    <div class="col-12 mt-5">
                        <p class="fs-5 text-warning"><strong>在这里评论</strong></p>
                        <div class="row">
                            <div class="col">
                                <input type="text" class="form-control" placeholder="名称" aria-label="First name">
                            </div>
                            <div class="col">
                                <input type="text" class="form-control" placeholder="电子邮件" aria-label="Last name">
                            </div>
                        </div>
                        <textarea class="form-control mt-3" rows="6" placeholder="信息"></textarea>
                        <div class="SubmitBtn mt-4">提交</div>
                        <p class="fs-5 text-warning mt-5"><strong>评论</strong></p>
                        <div class="commentItem">
                            <div class="row">
                                <div class="col-lg-4 col-5"><img style="height: 100px;" class="img-fluid" src="./images/user.bmp" alt="">
                                </div>
                                <div class="col-lg-5 col-4">
                                    <p class="fs-6 mb-lg-4"><strong>汤姆</strong></p>
                                    <p style="font-size: 10px;">就是这样子的,说的太好了......</p>
                                    <p style="font-size: 10px;">2022-9-25</p>
                                </div>
                                <div class="col-lg-2 col-2">
                                    <div class="replyBtn">回复</div>
                                </div>
                            </div>
                        </div>
                        <div class="commentItem mt-5">
                            <div class="row">
                                <div class="col-lg-4 col-5"><img style="height: 100px;" class="img-fluid" src="./images/user.bmp" alt="">
                                </div>
                                <div class="col-lg-5 col-4">
                                    <p class="fs-6 mb-lg-4"><strong>杰克</strong></p>
                                    <p style="font-size: 10px;">多一点浪漫,还是学不会</p>
                                    <p style="font-size: 10px;">2022-9-25</p>
                                </div>
                                <div class="col-lg-2 col-2">
                                    <div class="replyBtn">回复</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="col-lg-3 col-md-3 mt-5">
                <p class="fs-5 text-warning text-center"><strong>品牌动态分类</strong></p>
                <p class="content text-center" style="font-size: 14px;color: #535353;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path
                            d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>春季新品发布动态</p>
                <p class="content text-center" style="font-size: 14px;color: #535353;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path
                            d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>夏季新品发布动态</p>
                <p class="content text-center" style="font-size: 14px;color: #535353;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path
                            d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>秋季新品发布动态</p>
                <p class="content text-center" style="font-size: 14px;color: #535353;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path
                            d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>冬季新品发布动态</p>
                <p class="fs-5 text-warning text-center mt-5"><strong>知名品牌</strong></p>
                <p class="content text-center" style="font-size: 14px;color: #535353;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path
                            d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>海澜之家男装</p>
                <p class="content text-center" style="font-size: 14px;color: #535353;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path
                            d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>拉夏贝尔女装</p>
                <p class="content text-center" style="font-size: 14px;color: #535353;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path
                            d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                    </svg>巴拉巴拉童装</p>
                <p class="fs-5 text-warning text-center mt-5"><strong>订阅品牌动态</strong></p>
                <input type="text" placeholder="Emaiil...">
                <div class="btnMySelf">订阅</div>
                <!-- <button type="button" class="btn btn-warning text-white">订阅</button> -->
            </div>
        </div>
    </div>


    <!-- 底部 -->
    <div class="woManUpper">
        <p class="fs-1 text-white" style="margin-top: 30px;padding-top: 30px;">新时尚购物网</p>
    </div>
</body>

</html>